<template>
  <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" v-if="categoryList != null">
    <template v-for="item in categoryList" v-if="item.parentId==0">
      <el-menu-item v-if="findId(item.categoryId)" :index="item.categoryId.toString()">{{ item.text }}</el-menu-item>
      <el-submenu v-else :index="item.categoryId.toString()">
        <template slot="title" ><span style="height: 60px;display:inline-block; " @click="handleSelect(item.categoryId)">{{item.text}}</span></template>
        <template v-for="item2 in categoryList" v-if="item2.parentId==item.categoryId">
          <el-menu-item v-if="findId(item2.categoryId)" :index="item2.categoryId.toString()">{{ item2.text }}</el-menu-item>
          <el-submenu v-else :index="item2.categoryId.toString()">
            <template slot="title">{{item2.text}}</template>
            <template v-for="item3 in categoryList" v-if="item3.parentId==item2.categoryId">
              <el-menu-item :index="item3.categoryId.toString()">{{ item3.text }}</el-menu-item>
            </template>
          </el-submenu>
        </template>
      </el-submenu>
    </template>
  </el-menu>

</template>

<script>
import headerElMenuChilder from "./headerElMenuChilder";
export default {
  name: "headerElMenu",
  props: {
    categoryList: {
      type: Array,
      default(){
        return null
      }
    }
  },
  components: {
    headerElMenuChilder
  },
  data() {
    return {
      activeIndex: '1',
    };
  },
  methods: {
    handleSelect(key) {
      if(this.$route.query.categoryId !== key){
        this.$router.push({ path: "/blogList", query: { categoryId: key}});
        this.$emit("queryParam",key);
      }
    },
    findId(id){
      let res = true;
      for(let i = 0; i < this.categoryList.length; i++){
        if(this.categoryList[i].parentId == id) {
          res = false;
          break;
        }
      }
      return res;
    }
  },

}
</script>

<style scoped>

</style>
